<template>
<div>
  <div  class="box" v-if="list">
       <van-list>
  <van-cell v-for="(item,index) in list" :key="index"  >
   <div class="disable">
            <div class="left">
              <div class="smallbox">
                <div>{{toHM(item.showAt)}}</div>
                <div>{{toHM(item.endAt)}}</div>
                </div>
                <div class="smallboxtow">
                  <div>{{item.filmLanguage}}{{item.imagery}}</div>
                  <div>{{item.hallName}}</div>
                </div>
            </div>
        
            <div class="right">
              <div>
                <span>￥</span>
                <span>{{item.salePrice/100}}</span>
              </div>
              <div><van-button plain type="primary"  size="mini" color="#ff5f16">购买</van-button> </div>
            </div>
           </div>
          
  </van-cell>
</van-list>
  </div>
        <div class="empty">
              <div class="wrap">
                <img src="../assets/emptyFilmList.4e4721ad.png">
              </div>
              <div>暂无其他场次</div>
        </div>
  </div>
</template>

<script>
import tiem from '../utils/tiem'
export default {
  data(){
   return{
    list:{}
   }
        },
  methods:{
          ...tiem,
  }, 
  watch:{
    // 监听路由
    //当路由后面的参数发生改变的时候
    //就重新发起请求
   $route:function(){
        this.$http.get('playSchedule',
              {params:{
                cinemaId:this.$route.params.id,
                  filmId:this.$route.params.did,
                    date:this.$route.params.theTimeParameter,
                }}).then(res=>{
                  console.log('变了');

                  this.list=res.data.schedules
              })
   }
  } ,    
 mounted(){
  // console.log(this.$route.params);
  //请求影片场次
  //需要带上影院的id
  //需要带上电影的id
  //需要带上日期的id
  this.$http.get('playSchedule',
  {params:{
    cinemaId:this.$route.params.id,
      filmId:this.$route.params.did,
        date:this.$route.params.theTimeParameter,
    }}).then(res=>{
       console.log(res);
      this.list=res.data.schedules
 })
 }
}
</script>

<style scoped>

.disable{
  width: 100%;
  /* height: 65px; */
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.left{
  display: flex;
   align-items: center; 
}
.smallbox{
  margin-right: 30px;
}
.smallbox>div:nth-child(1){
  color: #191a1b;
  font-size: 15px;
  display: block;
  /* max-width: 80%; */
}
.smallbox>div:nth-child(2){
  font-size: 13px;
  color: #797d82;
  box-sizing: border-box;
  margin-top: 2px;
}
.smallboxtow>div:nth-child(1){
  font-size: 15px;
  color: #191a1b;;
}
.smallboxtow>div:nth-child(2){
  font-size: 13px;
  color:  #797d82;
  margin-top: 2px;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.right{
  display: flex;
   align-items: center;
   color:#ff5f16
}
.right>div:nth-child(1){
    margin-right: 20px;
}
.right>div>span:nth-child(1){
  font-size: 10px;
}
.right>div>span:nth-child(2){
  font-size: 15px;
}
.empty{
  height: 180px;
  padding: 40px 40px;
}
.wrap{
  width: 70px;
  height: 70px;
  margin: 0 auto 10px;
}
.wrap>img{
  width: 100%;
}
.empty>div:nth-child(2){
  text-align: center;
  color: #797d82;
  font-size: 14px;
}
</style>